<template>
  <div>
      <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu router unique-opened>
            <template v-for="(item, index) in routes">
              <el-submenu
                :index="index+''"
                :key="index"
                v-if="!item.hidden"
                >
                <template slot="title">
                  <i :class="item.iconCls" style="color: red;margin-right: 5px"></i>
                  <span>{{item.name}}</span>
                </template>
                <el-menu-item
                  :index="children.path"
                  v-for="(children, indexj) in item.children"
                  :key="indexj">
                  <span>{{children.name}}</span>  
                </el-menu-item>
            </el-submenu>
            </template>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
</el-container>
  </div>
</template>

<script>
export default {
    name: "Home",
    computed:{
      routes(){
        return this.$store.state.routes;
      }
    },
    methods: {
      
    }

}
</script>

<style>

</style>